<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>消息</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="../../javascript/api.js"></script> <!-- api.js必须放到最开头 -->
	    <script src="../../javascript/axios.js"></script>
	    <script src="../../javascript/vue.js"></script>
	    <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../javascript/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="imessage">
			<div class="left_div">
				<!--<button @click="refresh">刷新</button>-->
				<div class="m-card">
				<input @click="refresh" class="search" placeholder="搜索">
				<span class="add_chat"  @click="add_chat_tab=!add_chat_tab">+</span>
				<div class="add_chat_tab" :class="{'dis_none':add_chat_tab}">
					<p @click="addFriend">添加好友</p>
					<p @click="addGroundChat">发起群聊</p>
				</div>
				</div>
				<div class="left-tab-head">
					<ul>
						<li class="left-tab-head-li" :class="{active:activeClass==='message'}"  @click="tabChange('message')">消息</li>
						<li class="left-tab-head-li" :class="{active:activeClass==='friends'}"  @click="tabChange('friends')">好友</li>
						<li class="left-tab-head-li" :class="{active:activeClass==='ground'}"  @click="tabChange('ground')">群组</li>
					</ul>
				</div>
				<div class="left-tab-content">
						<ul>
							<!--消息-->
							<li v-if="tabChangeType==='message'"  class="dis_none" :class="{block:tabChangeType=='message'}">
								<ul class="m-list">
									<li class="item_head" v-for="item in messageHead" @click="open_chat(item.name)">
										<img class="avatar" width="50" height="50" alt="hhh" :src="item.headImg">
										<p class="name">{{item.name}}</p>
										<p class="firstText">{{item.firstText}}</p>
										<p class="firstTime">{{item.firstTime}}</p>
										<div class="unRead" v-if="item.unRead!=0">{{item.unRead}}</div>
									</li>
								</ul>
							</li>
							<!--好友-->
							<li  v-if="tabChangeType==='friends'"  class="dis_none" :class="{block:tabChangeType=='friends'}">
								<ul style="margin-top: 15px;" class="m-list"  v-for="item in friendHead">
									<span class="friendGroundTitle">{{item.title}}</span>
									<li class="item_head" v-for="item_friend in item.friendGround" @click="open_chat(item_friend.name)">
										<img class="avatar" width="50" height="50" alt="hhh" :src="item_friend.headImg">
										<p class="name">{{item_friend.name}}</p>
										<p class="firstText">{{item_friend.work}}</p>
									</li>
									<div class="" style="height: 1px;background: rgb(212, 211, 211);">
										
									</div>
								</ul>
							</li>
							<!--群组-->
							<li v-if="tabChangeType==='ground'"  class="dis_none" :class="{block:tabChangeType=='ground'}">
								<ul class="m-list">
									<li class="item_head" v-for="item in groundHead" @click="open_chat(item.name)">
										<img class="avatar" width="50" height="50" alt="hhh" :src="item.headImg">
										<p class="name">{{item.name}}</p>
										<p class="firstText">{{item.firstText}}</p>
										<p class="firstTime">{{item.firstTime}}</p>
										<div class="unRead" v-if="item.unRead!=0">{{item.unRead}}</div>
									</li>
								</ul>
							</li>
						</ul>
				</div>
				
			</div>
			<div class="right_div" :class="[tabChangeType==='ground'?'ground_class':'']">
				<div class="right_div_title">
					<img  width="56" height="56" src="../../images/lefticon/user.png"/>
					<span>{{indexTitle}}</span>
				</div>
				<div class="m-message" id = "Message"><!--聊天框-->
						<div class="Message_li" v-for="item in messageContent">
							<p class="time">
								<span>{{item.time}}</span>
							</p>
							<div class="main" v-for="item_contect in item.contect">
								<img :class="[item_contect.floor==='left'?'avatar_1':'avatar_0']" width="50" height="50" :src="item_contect.headImg">
								<div :class="[item_contect.floor==='left'?'text_1':'text_0']">
									<p v-if="item_contect.type===0">{{item_contect.text}}</p>
									<p v-if="item_contect.type===1" @click="play_audio" :style="{width: item_contect.during*10 +'px'}" style="color: #989494;">
										)))
									</p><span class="during_time" v-if="item_contect.type===1" :style="{left:item_contect.during*10+30+'px'}">{{item_contect.during}}"</span>
								</div>
								<div class="" style="width: 100%;height: 10px;float: right;">
								</div>
							</div>
						</div>
				</div>
				<div class="m-text"><!--输入框-->
					<div class="tools">
						<ul>
							<li><img src="../../images/weChat/hello.png"/></li>
							<li><img src="../../images/weChat/wenJian.png"/></li>
							<li><img src="../../images/weChat/dou.png"/></li>
							<li><img src="../../images/weChat/jieTu.png"/></li>
							<li><img src="../../images/weChat/callBakj.png"/></li>
							<li><img src="../../images/weChat/wuHeng.png"/></li>
							<li  style="float: right;padding-right: 25px;"><img @click="history" src="../../images/weChat/history.png"/></li>
						</ul>
					</div>
					<textarea placeholder="按 Ctrl+Enter换行，Enter 发送" v-model="message"></textarea>
					<div class="send" @click="send_message">
						发送(s)
					</div>
				</div>
			</div>
			<div class="groundAdv" v-if="tabChangeType==='ground'">
				<div class="" style="height: 86px;background: #ededed;">
					
				</div>
				<div class="groundGongGao"><!--群公告-->
					<div class="groundGongGao_title">
						<span>群公告(5)</span>
						<img src="../../images/weChat/edit.png"/>
					</div>
					<ul class="groundGongGao_ul" style="border-top: solid 1px #EDEDED;height: 124px;overflow: hidden;">
						<li v-for="item,index in groundGongGao_li">
							{{item.title}}
						</li>
					</ul>
					<p class="look_more" @click="showGroundGongGao" v-if="groundGongGao_li.length>3">查看更多...</p>
				</div>
				<div class="groundNumber"><!--群人数-->
					<div class="groundGongGao_title">
						<span>群成员(3)</span>
						<img src="../../images/weChat/addFriend.png"/>
					</div>
					<ul class="groundNumber_ul">
						<li>
							<img src="../../images/lefticon/user.png" />
							<span>李四</span>
						</li>
						<li>
							<img src="../../images/lefticon/user.png" />
							<span>李四</span>
						</li>
						<li>
							<img src="../../images/lefticon/user.png" />
							<span>李四</span>
						</li>
						<li>
							<img src="../../images/lefticon/user.png" />
							<span>李四</span>
						</li>
						<li>
							<img src="../../images/lefticon/user.png" />
							<span>李四</span>
						</li>
						<li>
							<img src="../../images/lefticon/user.png" />
							<span>李四</span>
						</li>
						<li>
							<img src="../../images/lefticon/user.png" />
							<span>李四</span>
						</li>
						
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="js/chatApi.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const accessToken = localStorage.token;
		console.log(accessToken);
		new Vue({
			el:"#imessage",
			data:{
				indexTitle:'',
				
				tabChangeType:'ground',/*转换的群组，信息，好友*/
				message:'',/*textarea*/
				lastTime:'',/*最近一次的聊天时间*/
				activeClass:'message',
				add_chat_tab:true,/*发起群聊， 添加好友*/
				groundGongGao_li:[/*群公告*/
					{
						title:"公告1",
						content:'',
						sendPeople:'',
						sendTime:'',
						link:''
					},
					{
						title:"公告2",
						content:'',
						sendPeople:'',
						sendTime:'',
						link:''
					},
					{
						title:"公告3",
						content:'',
						sendPeople:'',
						sendTime:'',
						link:''
					},
					{
						title:"公告4",
						content:'',
						sendPeople:'',
						sendTime:'',
						link:''
					},
					{
						title:"公告5",
						content:'',
						sendPeople:'',
						sendTime:'',
						link:''
					},
				],
				messageHead:[/*信息好友，第一栏*/
					{
						headImg:'../../images/lefticon/user.png',
						name :'李四',
						firstText:'嘻嘻嘻',
						firstTime:'12-15',
						unRead:5,
						userCode:'3333333',
					},
					{
						headImg:'../../images/lefticon/user.png',
						name :'陈七',
						firstText:'早晨',
						firstTime:'08-14',
						unRead:3,
						userCode:'222222',

					},
					{
						headImg:'../../images/lefticon/user.png',
						name :'张三',
						firstText:'你好呀',
						firstTime:'5-13',
						unRead:0,
						userCode:'111111',

					}
				],
				groundHead:[/*群组，第三栏*/
					{
						headImg:'../../images/lefticon/user.png',
						name :'李四组',
						firstText:'嘻嘻嘻',
						firstTime:'12-15',
						unRead:5,
						groundCode:'3333333',
					},
					{
						headImg:'../../images/lefticon/user.png',
						name :'CXXXXX组',
						firstText:'嘻嘻嘻',
						firstTime:'12-15',
						unRead:5,
						groundCode:'3333333',
					},
					{
						headImg:'../../images/lefticon/user.png',
						name :'撑伞组',
						firstText:'嘻嘻嘻',
						firstTime:'12-15',
						unRead:5,
						groundCode:'3333333',
					},
				],
				friendHead:[/*好友，第二栏*/
					{
						title:'A',
						friendGround:[
							{
								headImg:'../../images/lefticon/user.png',
								name :'啊人',
								userCode:'1111',
								work:'科长',
							},
							{
									headImg:'../../images/lefticon/user.png',
									name :'啊初',	
									userCode:'1111',
									work:'科长',
							},
						],
					},
					{
						title:'B',
						friendGround:[
							{
								headImg:'../../images/lefticon/user.png',
								name :'表哥',
								userCode:'1111',
								work:'科长',
							},
							{
									headImg:'../../images/lefticon/user.png',
									name :'表弟',	
									userCode:'1111',
									work:'科长',
							},
							{
									headImg:'../../images/lefticon/user.png',
									name :'表姐',	
									userCode:'1111',
									work:'科长',
							},
							{
									headImg:'../../images/lefticon/user.png',
									name :'表妹',	
									userCode:'1111',
									work:'科长',
							},
						],
					},
					{
						title:'C',
						friendGround:[
							{
								headImg:'../../images/lefticon/user.png',
								name :'表哥',
								userCode:'1111',
								work:'科长',
							},
							{
									headImg:'../../images/lefticon/user.png',
									name :'表弟',	
									userCode:'1111',
									work:'科长',
							},
							{
									headImg:'../../images/lefticon/user.png',
									name :'表姐',	
									userCode:'1111',
									work:'科长',
							},
							{
									headImg:'../../images/lefticon/user.png',
									name :'表妹',	
									userCode:'1111',
									work:'科长',
							},
						],
					}
				],
				messageContent:[/*聊天记录*/
					{/*一段信息，以时间为一段*/
						contect :[
							{
								headImg:'../../images/lefticon/user.png',
								type:0,
								text:'你好',
								floor:'left'
							},
							{
								headImg:'../../images/lefticon/user.png',
								type:0,
								text:'在吗？',
								floor:'left'
							},
							{
								headImg:'../../images/lefticon/user.png',
								type:1,
								text:'',
								floor:'left',
								during:10
							}
						],
						time:'2018-07-14  16:40',
					},
					{
						contect :[
							{
								headImg:'../../images/lefticon/user.png',
								type:0,
								text:'你好',
								floor:'right'
							},
							{
								headImg:'../../images/lefticon/user.png',
								type:0,
								text:'在的',
								floor:'right'
							},
							
						],
						time:'2018-07-15  16:45',
					},
					
				],
			},
			methods:{
				play_audio(){
					
				},
				refresh(){
					location.reload();
				},
				tabChange(val){/*改变消息，好友，群组*/
					apiTabChange(this,val);
				},
				open_chat(val){/*打开好友会话*/
					console.log(val);
					this.indexTitle =val;
				},
				send_message(){/*发送消息*/
					apiSendMessage(this)
				},
				enter(){/*textarea换行*/
					this.message+='\n';
				},
				history(){/*打开聊天记录*/
					apiHistory();
				},
				addFriend(){/*添加朋友*/
					this.add_chat_tab=true;
					apiAddFriend()
				},
				addGroundChat(){/*发起群聊*/
					this.add_chat_tab=true;
					apiAddGroundChat()
				},
				showGroundGongGao(){/*打开群公告*/
					apiShowGroundGongGao();	
				}
			},
			mounted(){
				apiEnterChange(this);/*enter换行*/
			},
			updated(){/*所以说要动脑子，必须要updata，因为这是渲染了dom之后，所以才能从dom那里去获取正确的高度值*/
					apiScrollHight();
			}
		})
	</script>
</html>
